<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    td select,
    td input {
      width: 150px;
    }

    #diagram td {
      vertical-align: bottom;
      text-align: center;
      padding: 10px;
    }

    #diagram div {
      margin: auto;
    }
  </style>
</head>

<body>

  Deposit calculator.

  <form name="calculator">
    <table>
      <tr>
        <td>Initial deposit</td>
        <td>
          <input name="money" type="number" value="10000" required>
        </td>
      </tr>
      <tr>
        <td>How many months?</td>
        <td>
          <select name="months">
            <option value="3">3 (minimum)</option>
            <option value="6">6 (half-year)</option>
            <option value="12" selected>12 (one year)</option>
            <option value="18">18 (1.5 years)</option>
            <option value="24">24 (2 years)</option>
            <option value="30">30 (2.5 years)</option>
            <option value="36">36 (3 years)</option>
            <option value="60">60 (5   years)</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Interest per year?</td>
        <td>
          <input name="interest" type="number" value="5" required>
        </td>
      </tr>
    </table>


  </form>


  <table id="diagram">
    <tr>
      <th>Was:</th>
      <th>Becomes:</th>
    </tr>
    <tr>
      <th id="money-before"></th>
      <th id="money-after"></th>
    </tr>
    <td>
      <div style="background: red;width:40px;height:100px"></div>
    </td>
    <td>
      <div style="background: green;width:40px;height:0" id="height-after"></div>
    </td>
  </table>

  <script>

    let form = document.forms.calculator;

    // your code
  </script>


</body>
</html>
